<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bo dy{
				width: 200px;
				height: 1000000px;
				background-image: url(img/熊出没.png);
				background-size: contain;
				/* 函数 cover 等比例放大图片  特点：图片按照比例放大存背景图片
				            【开发者：背景图片大小是否等于背景空间】
			           contain 等比例缩放图片  特点：图片按照比例缩放存背景图片
					        【开发者：背景图片等比例显示在背景空间】
			    */
			   /* 背景附件--尺寸中存在cover或contain */
			   background-attachment: scroll; /*背景图固定  scroll 背景图不固定*/
			}
			
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/熊出没.png);
				/* 问题：超大图--不显示  小图--显示
				   注意：背景空间大小，如果图小于背景空间---平铺
				 */
				background-repeat: no-repeat;/*no-repeat 不平铺  repeat-x/y 横/纵向平铺*/
				background-size: 30%;/*背景尺寸属性值：数值px % |函数 cover contain*/
			    /* 背景定位：前提--背景空间大于背景图 关键字：center、left、right、top、bottom */
				background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti laborum saepe consequuntur velit quidem id quod molestiae vero repellendus voluptate, dolores qui temporibus impedit, maiores sed similique possimus beatae nobis!
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis voluptatibus atque distinctio in maxime molestiae, dolor ratione amet. Voluptas provident consectetur tempore praesentium molestias esse voluptatum aliquid, similique pariatur in.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, cupiditate aperiam non fuga beatae doloremque exercitationem odio illum quidem eius quia labore quaerat voluptatem repudiandae laudantium dolorem cumque autem? Earum.
		<!-- html img图片 引入一张图片，位置不可以随意改变
		     css 背景图片 引入一张图片，位置可以随意改变
			 子属性 background-color 背景颜色
			       background-image 背景图
				   background-repeat 背景重复
				   background-size 背景尺寸
				   background-attachment 背景附件
				   background-position 背景定位
				   复合属性background：background-image、background-color、background-position
				                      background-siz、background-repeat、background-attachment
		           简写属性：background：background-image、background-position/size、background-repeat
				   替代子属性：background-image、background-color、background-repeat
			 复合属性 background   替代子属性
		 -->
		 <div></div>
	</body>
</html>